<template>
	<view>
		<!-- <u-navbar back-text="返回" title="剑未配妥，出门已是江湖"></u-navbar> -->
		<u-swiper @change="change" :height="250" :list="list" :title="title" :effect3d="effect3d" 
		:indicator-pos="indicatorPos" :mode="mode" :interval="3000" @click="click"></u-swiper>
		<u-notice-bar mode="horizontal" :list="notices"></u-notice-bar>
		<!-- <picker mode="region" bindchange="bindRegionChange" :value="region" :custom-item="customItem">
		    <view class="picker">
		      当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
		    </view>
		  </picker> -->
		<u-grid :col="3">
			<u-grid-item>
				<u-icon name="photo" :size="46"></u-icon>
				<view class="grid-text">图片</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="lock" :size="46"></u-icon>
				<view class="grid-text">锁头</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="hourglass" :size="46"></u-icon>
				<view class="grid-text">沙漏</view>
			</u-grid-item>
		</u-grid>
		<view class="u-p-10">
			<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
		</view>
		
		
		<u-gap height="70"></u-gap>
		<!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
	</view>
</template>

<script>
	import list from "./js.config.js";
	import mpauth from "@/common/mpauth.js";
	export default {
		data() {
			return {
    region: ['广东省', '广州市', '海珠区'],
    customItem: '全部',
				keyword: '遥看瀑布挂前川',
				notices: [
						'寒雨连江夜入吴',
						'平明送客楚山孤',
						'洛阳亲友如相问',
						'一片冰心在玉壶'
					],
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				title: true,
				mode: 'round',
				indicatorPos: 'bottomCenter',
				effect3d: true,
				
				// list: list,
				// desc: '众多的贴心小工具，是你开发过程中召之即来的利器，让你飞镖在手，百步穿杨'
			}
		},
		computed: {
			
			getIcon() {
				return path => {
					return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
				}
			},
			desc() {
				return this.$t('js.desc');
			}
		},
		async onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('nav.js')
			});
			// 
			await mpauth.gettoken(this) // 获取用户授权token
			console.log('vuex_tokenxxxxx',this.vuex_token);
			// let login = await this.mpAuth.login()
			// console.log('vuex_tokenxx',login);
			await this.$u.api.updateToken()
			
			let carousels = await this.$u.api.getCarousels({position:'index'})
			console.log('carousels',carousels);
		},
		methods: {
			titleChange(index) {
				this.title = index == 0 ? true : false;
			},
			modeChange(index) {
				this.mode = index == 0 ? 'round' : index == 1 ? 'rect' : index == 2 ? 'number' : 'none';
			},
			indicatorPosChange(index) {
				this.indicatorPos = index == 0 ? 'topLeft' : index == 1 ? 'topRight' : index == 2 ? 'bottomLeft' : index == 3 ? 'bottomCenter'  : 'bottomRight';
			},
			effect3dChange(index) {
				this.effect3d = index == 0 ? true : false;
			},
			click(index) {
				this.$refs.uToast.show({
					title: `点击了第${index + 1}张图片`,
					type: 'success'
				})
			},
			change(index) {
				// console.log(index);
			},
			openPage(path) {
				this.$u.route({
					url: '/pages/library/' + path + '/index'
				})
			},
			getGroupTitle(item) {
				return this.$i18n.locale == 'zh' ? item.groupName : item.groupName_en
			},
			getFieldTitle(item) {
				return this.$i18n.locale == 'zh' ? item.title : item.title_en
			}
		}
	}
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
	
		page {
			/* background-color: rgb(240, 240, 240); */
		}
</style>

<style lang="scss" scoped>
	.u-card-wrap { 
			background-color: $u-bg-color;
			padding: 1px;
		}
		
		.u-body-item {
			font-size: 32rpx;
			color: #333;
			padding: 20rpx 10rpx;
		}
			
		.u-body-item image {
			width: 120rpx;
			flex: 0 0 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
			margin-left: 12rpx;
		}
		
	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}
	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}
</style>
